<template>
	<van-action-sheet :show="show" @close="yxclose">
		<view class="yxbox">
			<view class="limg">
				<image @tap="images()" :src="baseUrl + (selected.thumbnail ? selected.thumbnail : item.image)"
					mode="widthFix">
				</image>
			</view>
			<view class="rtext">
				<view class="yixuan">
					<text class="yxtext">{{ selected.sn ? '已选：' : '未选择' }}</text>
					<text>{{ selected.sn || '' }}</text>
				</view>
				<view class="jiage">
					<text class="vipPrice" v-if="selected.vip_price > 0">会员价: ¥{{ selected.vip_price || '' }}</text>
					<text class="price" :style="selected.vip_price > 0 ? '' : 'font-size: 30rpx; color: #FF6200;'">¥{{
						selected.market_price || 0 }}</text>
				</view>
				<van-stepper class="stepper" :value="selected.number" :disabled="selected.sn ? false : true"
					@change="onStepper" input-width="36rpx" button-size="30rpx" :max="selected.stock"
					:disable-plus="selected.stock == 0 ? true : false" :mix="1" />
			</view>
		</view>

		<!-- 规格 -->
		<!-- <view class="ysfl" v-if="item.sku && item.sku.length > 0">
			<view class="tit">分类({{ item.sku && item.sku.length }})</view>
			<view class="item" v-for="(ites, index) in item.sku" :key="index" @click="selectysflItem(index, ites)">
				<view class="limg">
					<image :src="baseUrl + ites.thumbnail" mode="widthFix"></image>
				</view>
				<view :class="[selectedysflIndex == index ? 'rtext' : 'active']">
					<text>{{ ites.sn }}</text>
					<text class="price">{{ ites.market_price }}</text>
				</view>
			</view>
		</view> -->

		<view class="guige">
			<view class="spu" v-for="(spu, spuIndex) in item.spu" :key="spu.id">
				<!-- 规格标题 -->
				<view class="spu-title">{{ spu.name }} ({{ spu.item.length }})</view>
				<!-- 单规格值 -->
				<view class="sku-content" :style="selected.stock == 0 ? 'opacity: 0.5;' : ''">
					<block v-if="item.spu.length < 2">
						<view class="sku-item" :class="selectIndex[spuIndex] == skuIndex ? 'active' : ''"
							v-for="(sku, skuIndex) in item.sku" :key="sku.id"
							@click="clickSku(sku, skuIndex, spuIndex)">
							<!-- 规格图片 -->
							<view class="image">
								<image class="img" :src="baseUrl + sku.thumbnail" mode="heightFix" />
							</view>
							<view class="info">
								<text class="name">{{ sku.difference[0] }}</text>
								<text class="price">￥{{ sku.market_price }}</text>
							</view>
						</view>
					</block>
					<!-- 多规格值 -->
					<block v-else>
						<view class="sku-item many" :style="selected.stock == 0 ? 'opacity: 0.5;' : ''"
							:class="{ active: selectIndex[spuIndex] == skuIndex }" v-for="(sku, skuIndex) in spu.item"
							:key="sku" @click="clickSku(sku, skuIndex, spuIndex)">
							{{ sku }}
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 门店 -->
		<view class="mend" v-if="item.main_type == 3">
			<view class="tit">
				<text>门店</text>
				<view @click="navTo(`/long/stores/stores?id=${item.shop_id}`)">
					<text>更多</text>
					<van-icon name="arrow" color="#999999" />
				</view>
			</view>
			<view class="list-item">
				<view v-for="ites in shopList" class="list-juli">
					<view class="juli">
						<text class="jltxt">距离最近</text>
						<text class="dianm">{{ ites.store_name }}({{ ites.distance.distance }}km)</text>
						<van-icon class="didtb" name="location-o" />
						<van-icon name="checked" color="#FF6200" />
					</view>
					<view class="chanpin" @tap="toPick(ites)">
						<image :src="baseUrl + ites.store_avatar"></image>
						<view class="tright">
							<view class="tit">{{ ites.description }}</view>
							<view class="distance">
								<text>{{ ites.address }}</text>
								<text>{{ ites.distance.distance }}km</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="shopList.length == 0" class="juli-wucang">附近线下无门店</view>
		</view>
		<view class="btnbox">
			<view class="adgwc" v-if="!isVideo" @tap="shopping">加入购物车</view>
			<view class="goumai" :class="isVideo ? 'isVideo' : ''" @tap="toShopping">立即购买</view>
		</view>
	</van-action-sheet>
</template>

<script>
import vanActionSheet from "@/wxcomponents/vant/action-sheet/index"
import vanStepper from "@/wxcomponents/vant/stepper/index"
import vanIcon from "@/wxcomponents/vant/icon/index"
import baseUrl from "@/api/baseUrl";
import {
	handleCart
} from '@/api/api'
import {
	mapState,
	mapMutations
} from 'vuex';
export default {
	components: {
		vanActionSheet,
		vanStepper,
		vanIcon
	},
	props: {
		pregnant: {
			type: Boolean,
			default: false
		},
		show: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: {}
		},
		stepperNum: {
			type: Number,
			default: 0
		},
		shopList: {
			type: Array,
			default: () => []
		},
		isVideo: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			baseUrl,
			selectedysflIndex: -1,
			// 选中规格
			selected: {
				number: 1
			},
			// 选中规格下标
			selectIndex: {},
			// 选中规格值
			selectSku: {},
			// 不可选规格值
			disabledSku: {},
		}
	},

	methods: {
		...mapMutations('commodity', ['saveAddOrder', 'saveSelected']),
		// 点击规格值
		clickSku(item, skuIndex, spuIndex) {
			if (item.stock == 0) {
				return uni.showToast({
					title: '该商品已售罄',
					icon: 'none'
				})
			}
			this.$set(this.selectIndex, spuIndex, skuIndex); // 选中规格下标
			this.selected.number = 1; // 更新数量

			console.log('item', item)
			if (this.item.spu.length < 2) {
				// 单规格
				this.selected = item;
			} else {
				// 多规格
				this.$set(this.selectSku, spuIndex, item); // 选中规格值

				// 库存判断


				// 选择完成
				if (Object.keys(this.selectIndex).length == this.item.spu.length) {
					console.log('ok')
					// 对象转数组转字符串
					const str = Object.values(this.selectSku).join(',');
					// 匹配获取规格
					const select = this.item.sku.find(sku => sku.difference == str);
					console.log('selectItem', select)
					this.selected = select;
				}
			}
			// 更新产品图
			this.selected.thumbnail = this.selected.thumbnail ? this.selected.thumbnail : this.item.image;
			// console.log('selected', this.selected)
			this.$emit("steppet", this.selected)
		},
		toShopping() {
			let {
				selected,
				item
			} = this
			console.log(selected, item)
			if (!selected.sn) {
				uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				return
			}
			let array = []
			array.push({
				shop: {
					shop_id: item.shop_id,
					shop_name: item.shop.shopname
				},
				selected: [{
					id: selected.id,
					thumbnail: selected.thumbnail ? selected.thumbnail : item.image,
					number: selected.number || 1,
					market_price: selected.market_price,
					stock: selected.stock,
					vip_price: selected.vip_price,
					sn: selected.sn,
					title: item.title,
					goods_id: selected.goods_id
				}],
				remarks: ''
			})
			this.saveAddOrder(array)
			uni.navigateTo({
				url: '/long/orderForm/orderForm'
			})
		},
		// 加入购物车
		shopping() {
			let {
				selected,
				item
			} = this
			if (!selected.sn) {
				uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				return
			}
			if (selected.stock < 1) {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				})
				return
			}
			let params = {
				type: 'add',
				data: {
					sku_id: selected.id,
					number: selected.number || 1,
					goods_id: selected.goods_id,
					shop_id: item.shop_id
				}
			}
			handleCart(params).then(res => {
				uni.showToast({
					title: res.code == 1 ? '加入购物车成功' : res.msg,
					icon: res.code == 1 ? 'success' : 'none'
				})
				this.yxclose()
			})
		},
		toPick() {
			uni.navigateTo({
				url: '/long/productDetail/pick'
			})
		},
		yxclose() {
			this.$emit("onCilks", false)
		},
		onStepper(e) {
			this.selected.number = e;
			this.saveSelected(this.selected)
		},
		// 跟换颜色分类
		selectysflItem(index, ites) {
			this.selectedysflIndex = index; // 更新选中状态
			this.selected = ites;
			this.selected.number = 1; // 更新数量
			this.selected.thumbnail = this.selected.thumbnail ? this.selected.thumbnail : this.item.image
			console.log(this.selected)
			this.$emit("steppet", this.selected)
		},
		navTo(url) {
			uni.navigateTo({
				url
			})
		},
		images() {
			wx.previewImage({
				urls: [this.baseUrl + this.item.images]
			})
		}
	}
}
</script>

<style lang="scss">
// 规格
.guige {
	padding: 0 20rpx;

	.spu {
		.spu-title {
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 20rpx;
		}

		// sku
		.sku-content {
			display: flex;
			gap: 20rpx;
			flex-wrap: wrap;
			margin-bottom: 46rpx;

			.sku-item {
				height: 60rpx;
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 26rpx;
				background-color: #f4f2f2;
				border-radius: 6rpx;
				box-sizing: border-box;

				&.many {
					padding: 12rpx 20rpx;
					border-radius: 6rpx;
					justify-content: center;
				}

				.image {
					padding: 10rpx 25rpx;
					border-radius: 5rpx;
					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
					background-color: #fff;
					height: 60rpx;
					box-sizing: border-box;

					.img {
						width: fit-content;
						height: 42rpx;
					}
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12rpx 20rpx;

					.price {
						color: #FF6200;
						margin-left: 44rpx;
					}
				}

				&.active {
					background-color: #FF6200;
					color: #fff;

					.info .price {
						color: #fff;
					}
				}

				&.disabled {
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
	}
}

.juli-wucang {
	display: flex;
	justify-content: center;
	padding: 30upx;
	font-size: 26upx;
	color: #999999;
}

.list-juli {
	margin-bottom: 20upx;
}

.list-item {
	max-height: 500upx;
	overflow: auto;
}

.yxbox {
	margin: 30rpx 20rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	column-gap: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #F0F0F0;

	.limg {
		width: 196rpx;
		height: 146.7rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.06);
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;

		// image {
		// 	width: 50%;
		// }
	}

	.rtext {
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
		flex: 1;

		.yixuan {
			display: flex;
			column-gap: 10rpx;
			font-size: 30rpx;
			color: #333333;

			.yxtext {
				color: #5C5C5C;
			}
		}

		.jiage {
			display: flex;
			column-gap: 6rpx;

			.vipPrice {
				font-size: 24rpx;
				color: #FF6200;
			}

			.price {
				font-size: 22rpx;
				color: #333333;
			}
		}

		.stepper {
			align-self: flex-end;
			font-size: 20rpx;
		}
	}
}
</style>